<template>
    <div>
        <h1>{{ msg }}</h1>
        <div class="btn">
            <el-button type="primary" @click="getData">获取数据</el-button>
        </div>

        <div class="table">
            <el-table
                :data="tableData"
                stripe
                border
                size="small"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="80"
                    align="center">
                </el-table-column>
                <el-table-column
                    label="名字">
                    <template slot-scope="scope">
                        <div class="font_blue" @click="goToDetails(scope.row.id)">{{ scope.row.name }}</div>
                    </template>    
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="电话"
                    align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Page1',
    data() {
        return {
            msg: '我是各区楼盘',
            tableData: [],
        }
    },
    methods: {
        //刷新数据
        refreshPage() {//为了全局统一 每个页面都需要有这个初始化数据方法
            this.tableData = []
            this.msg = '我是各区楼盘-已执行刷新方法'
        },
        //获取表格数据
        getData() {
            this.$api.getUsers().then(res => {
                console.log(res)
                this.tableData = res.data
            })
        },
        //跳转详情
        goToDetails(id) {
            console.log(id)
            let routeData = this.$router.resolve({
                path: '/hinfo',
                query: {
                    'house_code': id
                }
            })
            window.open(routeData.href, '_blank')
        }
    },
    created() {//只执行一次

    },
    activated() {//每次进入执行
        
    },
    deactivated() {//每次离开执行

    }
}
</script>

<style lang="scss" scoped>
h1{
    text-align: center;
    padding: 100px;
}
.btn{
    text-align: center;
    padding-bottom: 20px;
}
.table{
    margin: 0 20px;
    border: 1px solid #EBEEF5;
}
.font_blue{
    color: #0066CC;
    cursor: pointer;
}
</style>